<script  lang="ts" setup name="Person">
  import {reactive,watch} from "vue";
  let preson = reactive({
    name:'张三',
    age:18,
    car:{
      car1:'奔驰',
      car2:'宝马'
    }
  })

  function changeName (){
    preson.name += '~'
  }
  function changeAge  (){
    preson.age += 1
  }
  function changeCar  (){
    preson.car = {car1: '爱玛',car2: '小鸟'}
  }
  //  监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型，要写成函数式
 /* watch(()=>preson.name,(value, oldValue, onCleanup)=>{
    console.log('preson.name变化了',value,oldValue)
  })*/
  //  监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型，可以直接写，也能写函数，更推荐写函数
  // 结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
  watch(()=>preson.car,(value, oldValue, onCleanup)=>{
    console.log('preson.car变化了',value,oldValue)
  },{deep:true})
</script>

<template>
  <div class="prisonBox">
    <h1>情况四：监视响应式对象中的某个属性，且该属性是基本类型，要写成函数式</h1>
    <h1>情况四：监视响应式对象中的某个属性，且该属性是对象类型，可以直接写，也能写函数，更推荐写函数</h1>
    <h2 >姓名：{{preson.name}}</h2>
    <h2 >年龄：{{preson.age}}</h2>
    <h2 >车：{{preson.car.car1}}、{{preson.car.car2}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changeCar">修改车</button>
  </div>
</template>

<style scoped>
    .prisonBox{
      background-color:skyblue;
      padding: 20px;
      box-shadow: 0 0 10px;
      font-size: 20px;
      border-radius: 20px;
      button{
        margin: 0px 10px;
      }
    }
</style>